<template>
  <div>
    <el-dialog title="菜单配置" custom-class="config-option-dialog" :close-on-click-modal="false" :modal="false"
      :visible.sync="open" :before-close="handleOpenClose" v-if="open">
      <el-scrollbar style="height:100%">
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="ModuleName" label="菜单名" width="150"></el-table-column>
          <el-table-column prop="LoadPath" label="路径" width="150"></el-table-column>
          <el-table-column prop="ModulePicture" label="配置图片路径"></el-table-column>
          <el-table-column prop="ModuleType" label="跳转类型">
            <template slot-scope="scope">
              <span>{{scope.row.ModuleType | statusFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="LoadParameter" label="是否展示">
            <template slot-scope="scope">
              <span>{{scope.row.LoadParameter | showFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ModuleType" label="操作" width="180">
            <template align="center" slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope)">编辑</el-button>
              <el-button v-if="scope.row.ModuleType==2" size="mini" type="danger" @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>

      <div slot="footer" class="dialog-footer">
        <el-button style="float:left" @click="handleAdd(activeName)" size="small">新增</el-button>
        <el-button @click="handleClose" size="small">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[dialogStatus]" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" width="40%"
      :close-on-click-modal="false" custom-class="config-option-dialog" :before-close="beforeClose">
      <el-scrollbar style="100%">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" enctype="multipart/form-data">
          <el-form-item class="w347" label="菜单名" placeholder="请输入菜单名" prop="ModuleName">
            <el-input v-model="form.ModuleName"></el-input>
          </el-form-item>

          <el-form-item class="w347" label="跳转路径" prop="LoadPath">
            <el-input class="w347" v-model="form.LoadPath" placeholder :disabled="disabled"></el-input>
          </el-form-item>

          <el-form-item class="w347" label="跳转类型" prop="ModuleType">
            <el-select class="filter-item w347" v-model="form.ModuleType" :disabled="disabled" placeholder="请选择">
              <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.key"
                :disabled="item.disabled">
                <span style="float: left">{{ item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="w347" label="配置图片路径" prop="ModulePicture">
            <el-input class="w347" v-model="form.ModulePicture" placeholder></el-input>
          </el-form-item>

          <el-form-item class="w347" label="排序" prop="order">
            <el-input class="w347" v-model="form.OrderNo" placeholder></el-input>
          </el-form-item>

          <el-form-item class="w347" label="是否展示" prop="LoadParameter">
            <el-switch active-value="1" inactive-value="0" v-model="form.LoadParameter" active-color="#13ce66"
              inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create()">确 定</el-button>
        <el-button v-else type="primary" @click="update()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  delModuleconf,
  addModuleconf,
  updateModuleconf,
  getModuleconf,
} from '@/api/data'
export default {
  props: {
    // open: Boolean,
  },
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '本地跳转',
        2: '外链跳转',
      }
      return statusMap[status]
    },
    showFilter(status) {
      const statusMap = {
        0: '否',
        1: '是',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      open: true,
      activeName: 'webrtcMainTel', // 激活标签
      operator: undefined, // 操作员信息
      tableData: [],
      dialogFormVisible: false,
      actionName: '新增菜单',
      form: {
        id: '',
        ModuleName: '',
        LoadPath: '',
        ModulePicture: '',
        ModuleType: '',
        OrderNo: '',
        LoadParameter: '0',
      },
      typeOptions: [
        {
          key: '1',
          label: '本地跳转',
          disabled: true,
        },
        {
          key: '2',
          label: '外链跳转',
        },
      ],
      textMap: {
        update: '编辑',
        create: '创建',
      },
      dialogStatus: '',
      rules: {
        ModuleName: [
          {
            required: true,
            message: '请输入菜单名',
            trigger: 'blur',
          },
        ],
        LoadPath: [
          {
            required: true,
            message: '请输入跳转路径',
            trigger: 'blur',
          },
        ],
        ModulePicture: [
          {
            required: true,
            message: '请输入配置图片路径',
            trigger: 'blur',
          },
        ],
        ModuleType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change',
          },
        ],
      },
      disabled: false,
    }
  },
  methods: {
    // 点击标签
    handleClickTab(tab) {
      console.log(tab.name)
      switch (tab.name) {
        case 'webrtcMainTel':
          break
      }
    },
    //保存
    handleSubmit(activeName) {
      this.$refs[activeName].handleSubmit()
    },
    // 关闭或取消
    handleClose() {
      console.log('handleClose')
      this.$emit('update:open', false)
    },
    inits() {
      this.tableData = JSON.parse(sessionStorage.getItem('menuList'))
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.open = false
      this.dialogStatus = 'create'
      this.form = {
        id: '',
        ModuleName: '',
        LoadPath: '',
        ModulePicture: '',
        ModuleType: '',
        OrderNo: '',
        LoadParameter: '0',
      }
      this.disabled = false
    },
    //新增修改取消
    cancel() {
      this.dialogFormVisible = false
      this.open = true
    },
    handleEdit(item) {
      this.dialogFormVisible = true
      this.open = false
      this.form = item.row
      this.dialogStatus = 'update'
      if (item.row.ModuleType == 1) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    beforeClose() {
      this.dialogFormVisible = false
      this.open = true
    },
    //获取菜单
    getMenuList() {
      getModuleconf().then((res) => {
        let menuList = res.data.eventdata
        this.tableData = menuList.sort(this.compare('OrderNo'))
        sessionStorage.setItem('menuList', JSON.stringify(this.tableData))
      })
    },
    //修改
    update() {
      updateModuleconf({
        id: this.form.id,
        ModuleType: this.form.ModuleType,
        ModuleName: this.form.ModuleName,
        LoadPath: this.form.LoadPath,
        ModulePicture: this.form.ModulePicture,
        LoadParameter: this.form.LoadParameter,
        OrderNo: this.form.OrderNo,
      }).then((res) => {
        if (res.data.msg == 'success') {
          this.dialogFormVisible = false
          this.open = true
          this.getMenuList()
        }
      })
    },
    //删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delModuleconf({ id: row.id }).then((res) => {
          if (res.data.msg == 'success') {
            this.dialogFormVisible = false
            this.open = true
            this.getMenuList()
          }
        })
      })
    },
    //新增
    create() {
      addModuleconf({
        ModuleType: this.form.ModuleType,
        ModuleName: this.form.ModuleName,
        LoadPath: this.form.LoadPath,
        ModulePicture: this.form.ModulePicture,
        LoadParameter: this.form.LoadParameter,
        OrderNo: this.form.OrderNo,
      }).then((res) => {
        if (res.data.msg == 'success') {
          this.dialogFormVisible = false
          this.open = true
          this.getMenuList()
        }
      })
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    handleOpenClose() {
      this.$emit('handleMenu', false)
    },
  },
  mounted() {
    this.inits()
  },
}
</script>

<style lang="scss" scoped>
/deep/.config-option-dialog {
  width: 60%;
  height: 70%;
  background-color: #1a4969;
  opacity: 0.97;
  .el-dialog__header {
    padding: 10px 20px;
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 0px 20px;
    height: calc(100% - 96px);
    .el-table,
    .el-table__expanded-cell {
      background-color: transparent;
    }
    .el-table th,
    .el-table tr {
      background-color: transparent;
    }
    .el-table {
      color: white;
      background-color: #1a4969;
    }
    .el-table__body tr:hover > td {
      background-color: #1a4969 !important;
    }
    .el-table thead {
      color: white;
    }
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
    .el-input__inner {
      width: 88%;
      background-color: #1a4969;
      color: #fff;
    }
    .el-input__suffix {
      right: 24px;
    }
    .el-form-item__label {
      font-size: 13px;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-form-item__label {
      color: white;
    }
  }
  .el-dialog__footer {
    padding: 10px 30px;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }
}
</style>